<!--
 * @Description:个人中心下的tabs切换 由于功能相对独立所以提取
 * @version: v1.0
 * @Author: Wang Xi
 * @Date: 2023-6-15 10:10:00
 * @LastEditors: WangXi
 * @LastEditTime: 2023-06-15 18:30:01
-->
<template>
	<view class="box_content_all">
		<!--    <view class="box_content_all_tab">
      <u-subsection current="checkFollowOrAuthor" :list="['关注', '作品']" @change="slotChange"></u-subsection>
    </view>-->
		<!--   切换tab      -->
		<view class="box_tab">
			<view class="box_checked_or_not" :class="checkFollowOrAuthor === 0 ? 'active' : ''" @click="slotChange">
				{{ $t('liveBar.follow') }}
			</view>
			<view class="box_checked_or_not" :class="checkFollowOrAuthor === 1 ? 'active' : ''" @click="slotChange">
				{{ $t('storeOfInterest.works') }}
			</view>
		</view>
		<view v-if="checkFollowOrAuthor===0" class="user-tabs">
			<view class="check-box">
				<view :class="`check-item ${current === index?'is-checked':''}`" v-for="(item,index) in list"
					@click="swiperChange(index)" >
					<view class="box_check">
						<text class="text_col">{{item.name}}</text>
						<view :class="`bg_tab ${current === index?'is-checked':''}`" />
					</view>
				</view>
			</view>

			<template v-if="current===0" v-for="(item,id) in concernsList.user.list">
				<listItem line :src="$u.file.getMedieUrl(item.avatar)" :name="item.nickName" @avatarClick="avatarClick(item)"
					:time="item.fans+'　Followers'" @listClick='anchorListClick(item)' :live-status="item.liveStatus === 2"
					:key="item.concernId">
					<u-button style="width: 158rpx;height:48rpx;border-radius: 12rpx;font-size: 30rpx;background-color: #f00 !important;" class="blue" slot="btn"
						@click.stop="cancelConcern('user',item.concernId)">{{$t('classifySeckill.Followed')}}</u-button>
				</listItem>
			</template>

			<template v-if="current===1" v-for="(item,id) in concernsList.store.list">
				<listItem radius="20" line :src="$u.file.getMedieUrl(item.shopAvatarUrl)" :name="item.shopName"
					@listClick="shopItemClick(item)" :time="item.interestNum+'　Followers'" :key="item.shopId">
					<u-button style="width: 158rpx;height:48rpx;border-radius: 12rpx;font-size: 30rpx;background-color: #f00 !important" class="blue" slot="btn"
						@click.stop="cancelConcern('store',item.shopId)">{{$t('classifySeckill.Followed')}}</u-button>
				</listItem>
			</template>

			<!--      <c-tabs v-model="activeTabs" @tabClick="tabClick">
        <c-tab-pane :label="$t('user.anchor')" name="user">
          <template v-for="(item,id) in concernsList.user.list">
            <listItem line :src="$u.file.getMedieUrl(item.avatar)" :name="item.nickName"
                      @avatarClick="avatarClick(item)" :time="item.fans+'　Followers'"
                      @listClick='anchorListClick(item)' :live-status="item.liveStatus === 2" :key="item.concernId">
              <u-button style="width: 158rpx;height:48rpx;border-radius: 12rpx;font-size: 30rpx;" class="blue"
                        slot="btn"
                        @click.stop="cancelConcern('user',item.concernId)">{{$t('classifySeckill.Followed')}}</u-button>
            </listItem>
          </template>
        </c-tab-pane>
        <c-tab-pane :label="$t('user.stores')" name="store">
          <template v-for="(item,id) in concernsList.store.list">
            <listItem radius="20" line :src="$u.file.getMedieUrl(item.shopAvatarUrl)" :name="item.shopName"
                      @listClick="shopItemClick(item)"
                      :time="item.interestNum+'　Followers'" :key="item.shopId">
              <u-button style="width: 158rpx;height:48rpx;border-radius: 12rpx;font-size: 30rpx;" class="blue"
                        slot="btn"
                        @click.stop="cancelConcern('store',item.shopId)">{{$t('classifySeckill.Followed')}}</u-button>
            </listItem>
          </template>
        </c-tab-pane>
&lt;!&ndash;    短视频暂时隐藏    &ndash;&gt;
&lt;!&ndash;        <c-tab-pane :label="$t('user.shortVideo')" name="video">
          <view class="video-box">
            <template v-for="(item,index) in concernsList.video.list">
              &lt;!&ndash; {{item}} &ndash;&gt;
              <videoCard @videoInfo="videoClick(item,index)" :key="item.id"
                         :details="{...item,img:$u.appImage.getOssVideoCover(item.url)}"></videoCard>
            </template>
          </view>
        </c-tab-pane>&ndash;&gt;
      </c-tabs>-->
			<u-modal v-model="videoModelShow" mask-close-able :show-title="false" :show-confirm-button="false" height="auto"
				width="auto" class="video-model">
				<video style="display: block;" autoplay :src="$u.file.getMedieUrl(activeVideoUrl)"></video>
			</u-modal>
			<promptDialog ref="promptDialog"></promptDialog>
		</view>
		<collect_content v-else />
	</view>
</template>
<script>
	import collect_content from "@/pages/collect/collect_content.vue"
	export default {
		data() {
			return {
				current: 0,
				list: [{
						name: this.$t('user.anchor')
					},
					{
						name: this.$t('user.stores')
					},
				],
				checkFollowOrAuthor: 0, //0选中关注  1选中作品
				// 当前选中
				activeTabs: 'user',
				// 关注列表
				concernsList: {
					// 用户关注列表
					user: {
						isGet: false, // 是否已经获取
						list: []
					},
					// 商店关注列表
					store: {
						isGet: false,
						list: []
					},
					// 短视频关注列表
					video: {
						isGet: false,
						list: []
					}
				},
				// 查询数据
				queryData: {
					user: {
						"pageSize": 9999,
						"pageNum": 1,
					},
					store: {
						"pageSize": 9999,
						"pageNum": 1,
					},
				
				},

				videoModelShow: false, //
				activeVideoUrl: '',
			}
		},
		created() {
			this.tabClick(this.current)
			// 填充数据 接口调试时  --- 删除
		},
		methods: {
			// 轮播滑动后
			swiperChange(index) {
				this.current = index
				this.tabClick(index)
			},
			//选中关注和作品
			slotChange() {
				if (this.checkFollowOrAuthor === 0) {
					this.checkFollowOrAuthor = 1;
				} else {
					this.checkFollowOrAuthor = 0;
				}
				console.log("===z checkFollowOrAuthor= " + this.checkFollowOrAuthor);
			},
			// 用户关注列表 ---是否是更新操作
			queryUserConcernsListAjax(isUpdate) {
				// if (this.concernsList.user.isGet && !isUpdate) {
				// 	return
				// }
				this.concernsList.user.list=[]
				this.$u.post('/app/user/concern/page/concerns', this.queryData.user).then(res => {
					this.concernsList.user.list = res.data.records
					this.concernsList.user.isGet = true
				})
			},
			// 店铺关注列表
			queryStoreConcernsListAjax(isUpdate) {
				// if (this.concernsList.store.isGet && !isUpdate) {
				// 	return
				// }
				this.concernsList.store.list=[]
				this.$u.post('/app/shop/interestShop/page', this.queryData.store).then(res => {
					this.concernsList.store.list = res.data.records
					this.concernsList.store.isGet = true
				})
			},
			// 短视频关注列表
			queryVideoConcernsListAjax(isUpdate) {
				// if (this.concernsList.video.isGet && !isUpdate) {
				// 	return
				// }
				this.$u.post('/app/short/user/page/' + '1', this.queryData.video).then(res => {
					this.concernsList.video.list = res.data.records
					this.concernsList.video.isGet = true
				})
			},
			// 取消用户关注
			cancelUserConcernAjax(id) {
				this.$u.post('/app/user/concern/' + id).then(res => {
					this.$u.toast(res.msg)
					this.$u.init.getUserInfo()
					this.queryUserConcernsListAjax(1)
				})
			},
			// 取消代店铺关注
			cancelStoreConcernAjax(id) {
				this.$u.post('/app/shop/interestShopCancel/' + id).then(res => {
					this.$u.toast(res.msg)
					this.queryStoreConcernsListAjax(1)
				})
			},
			// tab点击如果是当前已经选中则不会触发
			tabClick(val, item) {
				switch (val) {
					case 0:
						this.queryUserConcernsListAjax()
						break;
					case 1:
						this.queryStoreConcernsListAjax()
						break;
			
					default:
						break;
				}
			},
			// 取消关注
			cancelConcern(val, id) {
				this.$refs.promptDialog.show({
					confirm: (close) => {
						close()
						switch (val) {
							case 'user':
								this.cancelUserConcernAjax(id)
								break;
							case 'store':
								this.cancelStoreConcernAjax(id)
								break;
							default:
								break;
						}
					},
					des: this.$t('storeOfInterest.Cancel'),
					btnText: this.$t('system.affirm'),
					title: this.$t('modify.hint')
				})
			},
			// 短视频点击
			videoClick(item, index) {
				this.$u.vuex('vuex_video_record', {
					list: this.concernsList.video.list,
					index: index,
					show: true
				})
				uni.navigateTo({
					url: "/pages/public/recordVideo/recordVideo",
					"animationType": "slide-in-right",
					"animationDuration": 300
				})
			},
			//跳转主播页
			anchorListClick(item) {

				this.$u.route('pages/user/components/userInfo', {

					userId: item.userId
				})
				this.$u.vuex('vuex_anchor_info', item)
			},
			avatarClick(data) {
				if (data.liveStatus === 2) {
					uni.publicJS.intoPlayer({ ...data, userName: data.nickName })
				} else {
					this.$u.toast(this.$t('media.noOpen'))
				}
  


			},
			// 
			shopItemClick(item) {
				// 0 -状态正常
				const status = ~~item.status
				if (!status) {
					this.$u.route('/pages/shop/index', { shopId: item.shopId })
				} else {
					this.$u.toast(this.$t('media.closeShop'))
				}
			},
		},
		components: {
			collect_content,
		},
	}
</script>

<style lang="scss" scoped>
	.check-box {
		width: 308rpx;
		display: flex;
		background-color: #fff;
		margin-bottom: 32rpx;

		.check-item {
			flex: 1;
			height: 60rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			//background-color: #fff;
			color: #ACB1C0;
			transition: .2s;
			font-size: 30rpx;

			.box_check {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.bg_tab {
					width: 16rpx;
					height: 6rpx;
					background-color: #fff;
					border-radius: 3rpx;

					&.is-checked {
						background-color: #474ed0;
					}
				}

			}



			&.is-checked {
				background-color: #fff;
				color: #02010E;
				font-weight: bold;
				font-size: 36rpx;
			}
		}
	}

	/*切换tab*/
	.box_tab {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-left: 40rpx;
		margin-right: 40rpx;
		margin-top: 40rpx;
		margin-bottom: 10rpx;

		.box_checked_or_not {
			width: 320rpx;
			height: 64rpx;
			justify-content: center;
			align-items: center;
			background-color: #F5F6F8;
			border-radius: 20rpx;
			display: flex;
			flex-direction: row;

			text {
				color: #91909A;
				font-size: 24rpx;
			}

			&.active {
				background-color: #2934D0;
				color: #FFFFFF;
			}

		}


	}

	.box_content_all {
		display: flex;
		flex-direction: column;
		background-color: #fff;
		position: relative;
		top: -1px;

		.box_content_all_tab {
			margin-left: 40rpx;
			margin-right: 40rpx;
			margin-top: 40rpx;
		}

	}

	.user-tabs {
		::v-deep .c-tabs {
			.c-tabs-title {
				display: flex;
				justify-content: space-between;
				padding: 0 28rpx;
			}
		}

	}

	.video-box {
		display: flex;
		flex-wrap: wrap;

		>view {
			margin-bottom: 18rpx;

			&:not(:first-child):not(:nth-child(3n+1)) {
				margin-left: 20rpx;
			}
		}
	}
</style>